<template>
	<view class="user-details" :class="[userData.sex == 2?'boy-bg':'girl-bg']">

		<u-swiper :list="list1" height="600"></u-swiper>

		<!--  个人简介  -->
		<view class="intro" :class="[userData.sex == 2?'zy-dark-blue':'zy-dark-red']">

			<view class="msg">
				<view style="text-align: left; white-space: nowrap;">{{ userData.name }}</view>
				<view class="icon" :class="[isLove?'lovefull':'love']" @click="fllow()"></view>
			</view>

			<view style="margin: 10rpx 0rpx;font-size:50rpx; ">{{ userData.age }}岁</view>

			<view class="time">{{userData.time_begin}} - {{userData.time_end}}</view>


			<view class="tag">
				<u-tag v-for="(item,index) in userData.title" :key="index" v-if="userData.title[0] != null"
					color="white" bg-color="#FF7F50" border-color="#FF7F50" :text="item" type="success" size="mini"
					style="margin-right: 10rpx"></u-tag>
			</view>

			<view class="audio">
				个性语音:{{ userData.audio_url }}
				<audio></audio>
			</view>

			<view class="sign">
				个性签名: {{ userData.signature }}
			</view>
		</view>

		<!--  下单按钮  -->
		<view class="bottom-btn">

			<view class="money flex-1" :class="[userData.sex == 2?'zy-dark-blue':'zy-dark-red']">
				<view class="icon" :class="[userData.sex == 2?'boy-coin':'girl-coin']"></view>
				<view style="flex: 3; white-space: nowrap;">{{ userData.price }}币</view>
			</view>

			<view class="btn flex-1">
				<view class="btn-view" v-if="is_binding != 0">
					<u-button :custom-style="btnTypeNo" @click="noBusSetMoney" type="primary" shape="square">
						<u-icon name="shopping-cart" color=#fff size="60"></u-icon>
						不可下单
					</u-button>
				</view>
				<view class="btn-view" v-else-if="judge == 0">
					<u-button :custom-style="btnType" @click="setMoney" type="primary" shape="square">
						<u-icon name="shopping-cart" color=#fff size="60"></u-icon>
						去下单
					</u-button>
				</view>
				<view class="btn-view" v-else>
					<u-button :custom-style="btnTypeNo" @click="noSetMoney" type="primary" shape="square">
						<u-icon name="shopping-cart" color=#fff size="60"></u-icon>
						不可下单
					</u-button>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		GetOnGamer
	} from "../../api/gamer";
	import {
		SaveGamer
	} from "../../api/gamer";
	import {
		wx_login
	} from "../../api/login";
	import {
		IMG_URL
	} from "../../config/URL";

	export default {
		onLoad(options) {
			// 接收上一个页面传递的数据
			let result = JSON.parse(decodeURIComponent(options.data))
			this.userData.name = result.gamer.name
			this.userData.price = result.gamer.price
			this.userData.age = result.gamer.age
			this.userData.title = result.gamer.title
			this.userData.signature = result.gamer.signature
			this.gamerId = result.Userid
			this.GetOnGamer()
		},
		data() {
			return {
				price: 0,
				value: 1,
				title: "用户详情页面",
				userData: {
					time_begin: "00.00",
					time_end: "00.00",
					name: "",
					price: "",
					age: "",
					title: [],
					signature: "",
					audio_url: "",
				}, //用户数据
				list: [], //轮播图数据
				list1: [],
				gamerId: 0,
				btnType: {
					margin: '0px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					padding: '0px',
					borderRadius: '40rpx',
					marginLeft: '10rpx',
					fontSize: '40rpx',
				},
				btnTypeNo: {
					backgroundColor: '#808080',
					margin: '0px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					padding: '0px',
					borderRadius: '40rpx',
					marginLeft: '10rpx',
					fontSize: '40rpx',
				},
				isLove: true,
				id: 0,
				InitPrice: 0,
				judge: 0,
				is_binding: 0,
			}
		},
		methods: {
			// 下单
			setMoney() {
				uni.navigateTo({
					url: '/subPages/group/setOrder/setOrder?id=' + this.id
				})
			},
			noSetMoney() {
				uni.showToast({
					title: '该用户不在上班时间，或不在空闲状态',
					duration: 2000,
					icon: 'none',
				});
			},
			noBusSetMoney() {
				uni.showToast({
					title: '该用户是商家用户，你可以到空投商家中去发现他',
					duration: 2000,
					icon: 'none',
				});
			},
			async GetOnGamer() {
				const gamerInfo = await GetOnGamer({
					id: this.gamerId,
					f_user_id: uni.getStorageSync("userInfo").id
				});

				this.userData = gamerInfo.data.data;
				this.is_binding = gamerInfo.data.data.is_binding;
				this.judge = gamerInfo.data.data.judge
				this.price = gamerInfo.data.data.price
				this.InitPrice = gamerInfo.data.data.price
				this.data = gamerInfo.data.data;
				this.list = gamerInfo.data.data.links;
				this.id = gamerInfo.data.data.id

				let h = parseInt(this.userData.work_time_begin / 60) < 10 ? "0" + parseInt(this.userData
					.work_time_begin / 60) : parseInt(this.userData.work_time_begin / 60)
				let m = this.userData.work_time_begin % 60 < 10 ? "0" + this.userData.work_time_begin % 60 : this
					.userData.work_time_begin % 60
				this.userData.time_begin = h + ":" + m

				let h1 = parseInt(this.userData.work_time_end / 60) < 10 ? "0" + parseInt(this.userData.work_time_end /
					60) : parseInt(this.userData.work_time_end / 60)
				let m1 = this.userData.work_time_end % 60 < 10 ? "0" + this.userData.work_time_end % 60 : this.userData
					.work_time_end % 60
				this.userData.time_end = h1 + ":" + m1

				if (gamerInfo.data.data.save == 0) {
					this.isLove = false
				} else {
					this.isLove = true
				}

				//图片处理
				let links = JSON.parse(JSON.stringify(this.userData.links))
				console.log(links);
				links.map(e => {
					this.list1.push({
						image: IMG_URL + e.link
					})
				})
				uni.hideLoading();
			},
			fllow() {
				const saveGamer = SaveGamer({
					f_gamer_id: this.gamerId,
					f_user_id: uni.getStorageSync("userInfo").id
				});
				uni.hideLoading();
				console.log(saveGamer);
				this.isLove = !this.isLove;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../../lib/css/color";

	.user-details {
		.numberBox {
			display: flex;
			justify-content: space-between;
		}

		min-height: 100vh;
		padding: 25rpx;
		display: flex;

		flex-flow: column nowrap;

		.intro {
			padding: 15rpx;
			flex: 1;

			.msg {
				display: flex;
				text-align: center;

				view {
					flex: 1;
					font-size: 50rpx;
				}

				.icon {
					text-align: right;
				}

			}

			.time {
				font-size: 50rpx;
			}

			.tag {
				color: white;
				font-size: 40rpx;
				display: flex;
				margin-top: 10rpx;

				view {
					margin-right: 20rpx;
					border-radius: 10rpx;
					padding: 5rpx;
					max-width: auto;
				}

			}

			.audio {
				margin-top: 20rpx;
			}

			.sign {
				word-wrap: break-word;
				height: auto;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		.bottom-btn {
			background: white;
			border-radius: 50rpx;
			display: flex;
			justify-content: space-between;

			.money {
				margin-left: 20rpx;
				font-size: 60rpx;
				line-height: 100rpx;
				font-weight: bolder;

				.icon {
					flex: 1;
				}
			}

			.btn {
				padding: 10rpx;

				view {
					font-size: 40rpx;
					line-height: 80rpx;
				}

				.btn-view {
					flex-grow: 1;
					border-radius: 40rpx;
					overflow: hidden;
				}
			}
		}
	}

	.flex-1 {
		display: flex;
		flex: 1;
	}


	.love {
		background: url('/static/image/userDetails/love.png') no-repeat right;
		background-size: contain;
	}

	.lovefull {
		background: url('/static/image/userDetails/lovefull.png') no-repeat right;
		background-size: contain;
	}

	.boy-coin {
		background: url('/static/image/userDetails/boyCoin.png') no-repeat right;
		background-size: contain;
	}

	.girl-coin {
		background: url('/static/image/userDetails/girlCoin.png') no-repeat right;
		background-size: contain;
	}
</style>
